import {createElement, findDOMNode, Component} from 'rax';
import Touchable from 'rax-touchable';

import MountingNavigation from './components/mountingNavigation';
import TabHeader from './components/tabHeader';

const defaultModuleData = {
  tabHeight: 100,
  itemHeight: 80,
  itemWidth: 145,
  itemPadding: 10,
  fixedTab: true,
  items: [
    {
      itemCover: '//img.alicdn.com/imgextra/i4/3355153118/TB2UAadhHsTMeJjSsziXXcdwXXa_!!3355153118.jpg',
      itemBack: '//img.alicdn.com/imgextra/i1/3355153118/TB2agOvhHsTMeJjSszhXXcGCFXa_!!3355153118.jpg',
      url: "//img.alicdn.com/tfs/TB1Ft7SMVXXXXcZXFXXXXXXXXXX-440-587.jpg"
    },
    {
      itemCover: '//img.alicdn.com/imgextra/i4/3355153118/TB2UAadhHsTMeJjSsziXXcdwXXa_!!3355153118.jpg',
      itemBack: '//img.alicdn.com/imgextra/i1/3355153118/TB2agOvhHsTMeJjSszhXXcGCFXa_!!3355153118.jpg',
      url: "//img.alicdn.com/tfs/TB1Ft7SMVXXXXcZXFXXXXXXXXXX-440-587.jpg"
    },
    {
      itemCover: '//img.alicdn.com/imgextra/i4/3355153118/TB2UAadhHsTMeJjSsziXXcdwXXa_!!3355153118.jpg',
      itemBack: '//img.alicdn.com/imgextra/i1/3355153118/TB2agOvhHsTMeJjSszhXXcGCFXa_!!3355153118.jpg',
      url: "//img.alicdn.com/tfs/TB1Ft7SMVXXXXcZXFXXXXXXXXXX-440-587.jpg"
    },
    {
      itemCover: '//img.alicdn.com/imgextra/i4/3355153118/TB2UAadhHsTMeJjSsziXXcdwXXa_!!3355153118.jpg',
      itemBack: '//img.alicdn.com/imgextra/i1/3355153118/TB2agOvhHsTMeJjSszhXXcGCFXa_!!3355153118.jpg',
      url: "//img.alicdn.com/tfs/TB1Ft7SMVXXXXcZXFXXXXXXXXXX-440-587.jpg"
   },
    {
      itemCover: '//img.alicdn.com/imgextra/i4/3355153118/TB2UAadhHsTMeJjSsziXXcdwXXa_!!3355153118.jpg',
      itemBack: '//img.alicdn.com/imgextra/i1/3355153118/TB2agOvhHsTMeJjSszhXXcGCFXa_!!3355153118.jpg',
      url: "//img.alicdn.com/tfs/TB1Ft7SMVXXXXcZXFXXXXXXXXXX-440-587.jpg"
   },
    {
      itemCover: '//img.alicdn.com/imgextra/i4/3355153118/TB2UAadhHsTMeJjSsziXXcdwXXa_!!3355153118.jpg',
      itemBack: '//img.alicdn.com/imgextra/i1/3355153118/TB2agOvhHsTMeJjSszhXXcGCFXa_!!3355153118.jpg',
      url: "//img.alicdn.com/tfs/TB1Ft7SMVXXXXcZXFXXXXXXXXXX-440-587.jpg"
   },
    {
      itemCover: '//img.alicdn.com/imgextra/i4/3355153118/TB2UAadhHsTMeJjSsziXXcdwXXa_!!3355153118.jpg',
      itemBack: '//img.alicdn.com/imgextra/i1/3355153118/TB2agOvhHsTMeJjSszhXXcGCFXa_!!3355153118.jpg',
      url: "//img.alicdn.com/tfs/TB1Ft7SMVXXXXcZXFXXXXXXXXXX-440-587.jpg"
   },
  ],
};

const styles = {
  wrapper: {
    width: 750,
    textAlign: 'center',
  },
};
class MainApp extends Component {
  constructor(props) {
    super(props);
    this.pageUtils = props.pageUtils;
    this.state = {
      mds: props.mds || {},
      gdc: props.gdc || {},
      selected: 0,
    };
  }

  goTargetUrl = (url, nid) => {
    let { mds, gdc } = this.state;
    let params = {
      url: url,
      nid: nid || 0,
      widgetId: mds.widgetId,
      moduleName: mds.moduleName
    };

    this.pageUtils && this.pageUtils.goTargetUrl(params);
  };

  render() {
    const { selected, mds } = this.state;
    let {
      tabHeight,
      itemHeight,
      itemWidth,
      itemPadding,
      items,
      fixedTab,
    } = this.state.mds.moduleData;

    // 校正数据
    tabHeight = parseInt(tabHeight) || defaultModuleData.tabHeight;
    itemHeight = parseInt(itemHeight) || defaultModuleData.itemHeight;
    itemWidth = parseInt(itemWidth) || defaultModuleData.itemWidth;
    itemPadding = parseInt(itemPadding) || defaultModuleData.itemPadding;
    if (!items || !items.length || !items[0].itemBack || !items[0].itemBack.length) {
      items = defaultModuleData.items;
    }

    // props
    const menuProps = {
      pageUtils: this.pageUtils,
      height: tabHeight,
      animated: true,
    };
    const tabHeaderProps = {
      selected,
      mds,
      height: tabHeight,
      itemHeight,
      itemWidth,
      itemPadding,
      items,
      onClickHot: (url, nid) => {
        this.goTargetUrl(url, nid);
      },
      clickItem: (item, index) => {
        this.setState({
          selected: index,
        });
        if (this.pageUtils && this.pageUtils.pageEmitter) {
          const emitter = this.pageUtils.pageEmitter;
          emitter.emit('clickTab', index);
        }
        if (this.pageUtils && this.pageUtils.lift) {
          const { widgetId } = this.state.mds;
          this.pageUtils.lift.scrollTo(widgetId);
        }
      },
    };

    console.log('fixedTab: ', fixedTab);
    return fixedTab !== 'false' ? (
      <View data-role={mds.moduleName} data-spmc={`${mds.moduleName}_${mds.widgetId}`}>
        <MountingNavigation {...menuProps}>
          <View style={styles.wrapper}>
            <TabHeader {...tabHeaderProps}/>
          </View>
        </MountingNavigation>
      </View>
    ) : (
      <TabHeader {...tabHeaderProps}/>
    )
  }
}

export default MainApp;